<template>
  <div class="container">
    <docDetailFeeIn
      v-model:detailData="data"
      :inDisabled="inDisabled"
      :disabled="disabled"
      style="flex: 1"
    ></docDetailFeeIn>
    <docDetailFeeOut
      v-model:detailData="data"
      :outDisabled="outDisabled"
      :disabled="disabled"
      style="flex: 1"
    ></docDetailFeeOut>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import docDetailFeeIn from "./docDetailFeeIn.vue";
import docDetailFeeOut from "./docDetailFeeOut.vue";
export default defineComponent({
  components: {
    docDetailFeeIn,
    docDetailFeeOut,
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:detailData"],
  computed: {
    data: {
      get() {
        return this.detailData;
      },
      set(value) {
        this.$emit("update:detailData", value);
      },
    },
  },
  data() {
    return {
      inDisabled: false,
      outDisabled: false,
      disabled: false,
    };
  },
  watch: {
    "data.incomeLock"(newVal) {
      this.inDisabled = newVal == 1;
    },
    "data.costLock"(newVal) {
      this.outDisabled = newVal == 1;
    },
    "data.financeLock"(newVal) {
      this.disabled = newVal == 1;
    },
  },
  methods: {},
  mounted() {},
});
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
